<template><div class="big">
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>数据统计</span>
  </div>
  <div  class="text item">
        <span class="pick">房间总数：</span><span class="nember">{{ conunt }}</span>
        <span class="pick">居民总数：</span><span class="nember">{{ userinfo }}</span>
         <span class="pick">商店总数：</span><span class="nember">{{ storest }}</span>
 <span class="picks">报修总数：</span><span class="nembers">{{ repairst }}</span>
  <span class="picker">投诉总数：</span><span class="nembers">{{ questionstone }}</span>
  </div>
</el-card>
<el-card class="box-card">
     <div slot="header" class="clearfix">
    <span>今日数据变动</span>
  </div>
  <div  class="text item">
        <div class="samll"><span class="pick">新增维修：</span><span class="nember">0</span></div>
        <div class="samll"><span class="pick">未处理保修：</span><span class="nember">{{repairstatest}}</span></div>
         <div class="samll"><span class="pick">新增投诉：</span><span class="nember">4</span></div>
         <div class=""><span class="pick">未处理投诉：</span><span class="nember">{{ repairst }}</span></div>
  </div>
</el-card>
<el-card class="right">
  <div slot="header" class="header">
    <span>待维修处理</span>
  </div>
  <div  class="maintain">


  </div>
</el-card>
<el-card class="righ">
  <div slot="header" class="header">
    <span>待投诉处理</span>
  </div>
  <div  class="maintain">
     <p v-for="(item,index) in questionsly" :key="index" class="qs">
        {{index+1}},<span class="yes">{{ questionsly[index].address }}：</span
        >{{ questionsly[index].content }}
      </p>
  </div>
</el-card>
 <div ref="echarts1" class="line-chart">

    </div>
</div>

</template>
<script>

import {
  houses,
  userinfo,
  stores,
  repairs,
  questions,
  repairstate,
  questionstate,
} from "../api/goods";
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
  data() {
    return {
        list: [],
      conunt: 0,
      userinfo: 0,
      storest: 0,
      repairst: 0,
      questionstone: 0,
      repairstatest: 0,
      questionstatee: 0,
      repairsqe: 0,
      repai: [],
      questionsly: [],
    };
  },
  created() {},
  mounted() {
    this.onlkis();
    this.onUserinfo();
    this.stores();
    this.repairs();
    this.questions();
    this.repairstates();
    this.questionstateq();
    this.myEcharts1()
    
  },
  methods: {
     async onlkis() {
      const { data, errCode } = await houses();
      console.log(data);

      this.conunt = data.counts;
    },
    async onUserinfo() {
      const { data } = await userinfo();
      this.userinfo = data.counts;
    },
    async stores() {
      const { data } = await stores();
      console.log(data);
      this.storest = data.counts;
    },
    async repairs() {
      const { data } = await repairs();
      console.log(data);
      this.repai = data.list;
      this.repairst = data.counts;
    },
    async questions() {
      const { data } = await questions();
      console.log(data);
      this.questionsly = data.list;
      this.list = data.list;
      this.questionstone = data.counts;
    },
    async repairstates() {
      const { data } = await repairstate();
      console.log(data);
      this.repairstatest = data.counts;
    },
    async questionstateq() {
      const { data } = await questionstate();
      console.log(data);
      this.questionstatee = data.counts;
    },
    myEcharts1() {
      const myChart = echarts.init(this.$refs.echarts1)
      //配置图表
    const option = {
        title: {
          text: "数据展示",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["报修总数", "投诉总数"],
          textStyle: {
            color: "#000",
            fontSize: 18,
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["一月", "二月", "三月", "四月", "五月", "六月", "七日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "投诉总数",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "报修总数",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
        };
              myChart.setOption(option);
      window.onresize = function () {
        myChart.resize()
      }
  }}}

</script>
<style>
.yes{
  color: blue;
}
.qs{
  font-size: 18px;

  }
.line-chart {
  height: 40%;
  width: 69%;
  float: left;
}
.user{
    color: blue;
    font-size: 18px;
}
.content{
    font-size: 18px;
    }
.header{
    font-size: 18px;
}
.big{
    height: 100%;
}
.righ{
    width: 30%;
    float: right;
    height:40% ;
}
.right{
    margin-top: -13%;
    width: 30%;
    float: right;
    height:40% ;
    margin-bottom: 1%;
}
.samll{
    float: left;
    border-right: 1px solid  #cccccc;
    width: 20%;
    
}
.picks{
    /* float: right; */
    margin-left: 25%;
     font-size: 18px;
    /* margin-left: 25px; */
}
.picker{
     font-size: 18px;
     margin-left: 25px;
}
.nembers{
        font-size: 18px;
    color: red;
}
.pick{
    /* float: left; */
    font-size: 18px;
    margin-left: 25px;
}
.nember{  
    /* float: left; */
    font-size: 18px;
    color: red;
}
 .text {
    font-size: 14px;
  }

  .item {
      line-height: 60PX;
      height: 60px;
      border: 1px #EBEEF5 solid; 
    margin-bottom: 18px;
  }
  .clearfix{
      font-size:25px;
      border: none;
  }
  .el-card__header {
      border: none;
  }
/* 
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  } */

  .box-card {
      float: left;
    width: 68%;
    margin-bottom: 26px;
  }
</style>